<template>
    <main>
        <div @click="sendPrepage(now-1)">上页</div>
        <p @click="sendpage(i+1)" v-for="(v,i) in Math.ceil(sum/size)" :class="{changeColor:i+1==now?true:false}">{{i+1}}</p>
        <div @click="sendNextpage(now+1,Math.ceil(sum/size))">下页</div>
    </main>
</template>
<style lang="less" scoped>
div{
    width: 4.5rem;
    height: 1.5rem;
    margin: 0 0.2rem;
    padding: 0;
    float: left;
    text-align: center;
    font-size: 1rem;
    color: #000;
    &:hover{
        color: #1abc9c;
    }
}
.changeColor{
    color: #1abc9c;
}
p{
    width: 1rem;
    height: 1.4rem;
    margin: 0 0.2rem;
    padding: 0;
    float: left;
    font-size: 1.3rem;
    text-align: center;
    color: #000;
    &:hover{
        color: #1abc9c;
    }
}
</style>
<script lang="ts" setup>
defineProps({
    sum:{
        type:Number,
        default:0
    },
    size:{
        type:Number,
        default: 0
    },
    now:{
        type:Number,
        default: 0
    }
})
let emit=defineEmits(["prePage","nextPage","sendpage"])
let sendPrepage=(n)=>{
    if(n>0){emit("prePage",n)}else{emit("prePage",1)}
}
let sendNextpage=(n,s)=>{
    if(n<=s){emit("prePage",n)}else{emit("prePage",s)}
}
let sendpage=(n)=>{
    emit("prePage",n)
}
</script>